<template>
  <view class="container">

    <view class="info-card">
      <view class="info-item">
        <text class="label">头像</text>
        <view class="avatar-wrapper" @click="open1">
          <image class="avatar" src="https://kkimgs.yisou.com/ims?kt=url&at=ori&key=aHR0cHM6Ly9jLXNzbC5kdHN0YXRpYy5jb20vdXBsb2Fkcy9pdGVtLzIwMTUwNC8yNS8yMDE1MDQyNUgzNTE5X3IzVEoyLnRodW1iLjEwMDBfMC5qcGVn&sign=yx:9_amvNPRjvvelQdmSB2aL6a0wbk=&tv=0_0"></image>
		  <text class="label2">></text>
        </view>
      </view>

      <view class="info-item">
        <text class="label">姓名</text>
        <text class="value">张先生</text>
      </view>

      <view class="info-item" @click="open2">
        <text class="label">电话</text>
        <text class="value">15023457896</text>
      </view>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {

    }
  },
  methods:{
	 open1(){
		 uni.navigateTo({
		 	url:'/pages/wb-GeRenXinXi/XinXiXiuGaiTouXiang/XinXiXiuGaiTouXiang'
		 })
	 },
	 open2(){
		 uni.navigateTo({
		 	url:'/pages/wb-GeRenXinXi/XinXiXiuGaiPhone/XinXiXiuGaiPhone'
		 })
	 }
  },
  
}
</script>


<style>
.container {
  padding: 20rpx;
}

.title {
  color: white;
  font-size: 36rpx;
}

.info-card {
  background-color: red;
  border-radius: 10rpx;
  overflow: hidden;
  margin-top: 20rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 5rpx solid #f0f0f0;
  height: 100rpx;
  background-color: peru;
}

.label {
  font-size: 32rpx;
  color: #333;
}

.value {
  font-size: 32rpx;
  color: #666;
}

.avatar-wrapper {
  display: block;
  /* background-color: blue; */
  width: 130rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.info-item:last-child {
  border-bottom: none;
}

/* 设置 */
.label2{
	display: block;
	float: right;
	/* background-color: red; */
	font-size: 40rpx;
	font-weight: 550;
}
.avatar-wrapper > text{
	text-align: center;
	margin-top: 15rpx;
}
</style>
